<script type="text/javascript" src="<?php echo tos_cdn_url('js/calendar.js');?>"></script>
<script type="text/javascript" src="<?php echo tos_cdn_url('js/cdn.js');?>"></script>
<script type="text/javascript" src="<?php echo tos_cdn_url('js/richtext.js');?>"></script>
<script type="text/javascript" src="<?php echo tos_cdn_url('js/knm.js');?>"></script>
<script type="text/javascript">
var cdn = new z.cdn();

var node_form = document.forms['node_form'];
init_node_form();

var node_form_submit = document.forms['node_form_submit'];
node_form_submit.onsubmit = submit_node_form;

var thumbnail = z.s('node_thumbnail');
thumbnail.onclick = function () {
    cdn.show(null, function () {
        thumbnail.src = z.cdn_url(this.img_cdn_path);
        this.hide();
        form_add('thumbnail', this.img_cdn_path);
    });
    cdn.set_pos(360, 60);
};


var caption_input = node_form['caption'];
var url_segment_input = node_form['url_segment'];
caption_input.onchange = function () {
    url_segment_input.onchange();
    this.changed = true;
};
url_segment_input.onkeyup = function () {
    url_segment_input.onchange();
};
url_segment_input.onchange = function () {
    if (z.trim(url_segment_input.value) == '') {
        this.value = z.clean_url(caption_input.value);
    } else {
        this.value = z.clean_url(this.value);
    }
    this.changed = true;
};

var keyword_input = z.s('keyword_input');
var keyword_search_bt = z.s('keyword_search_bt');
var _offset = z.getAbsOffset(keyword_input);
var _x = _offset.left + keyword_input.offsetWidth + 20;
var _y = _offset.top;
var knm = new z.knm();
knm.set_pos(_x, _y);
keyword_input.onkeyup = function () {
    knm.show(this.value);
};
keyword_search_bt.onclick = function () {
    knm.display();
};
knm.on_select_keyword = function (keyword) {
    //add_keyword(params);
    var container = z.s('keyword_container');
    container.appendChild(keyword);
    keyword_input.value = '';
};
knm.on_select_node = function () {
    add_prev_node(this.node_html, this.node_id, true);
}
<?php
$_klist = array();
if ($this->get_data('keyword_list')) {
    $_klist = $this->get_data('keyword_list');
}
?>
<?php if ($_klist):?>
    <?php foreach ($_klist as $k): ?>
    z.s('keyword_container').appendChild(knm.keyword(<?php echo json_encode($k);?>));
    <?php endforeach;?>
<?php endif;?>

var json_prev_nodes = <?php m('node')->json_prev_nodes($this->get_data('id'));?>;
for (var node_id in json_prev_nodes) {
    add_prev_node(json_prev_nodes[node_id], node_id);
}

function add_prev_node(node_html, node_id, is_new) {
    var elem_id = 'node_' + node_id;
    if (z.s(elem_id)) {
        alert('node already exists');
        return;
    }
    var div = document.createElement('div');
    div.id = 'node_' + node_id;

    var a = document.createElement('a');
    a.className = 'delete inline-block';
    a.href = 'javascript:;';
    a.innerHTML = 'delete';
    a.onclick = function () {
        div.parentNode.removeChild(div);
        if ( ! is_new) {
            form_add('remove_prev_ids[]', node_id);
        }
    };
    div.appendChild(a);

    var set_parent_bt = document.createElement('a');
    set_parent_bt.href = 'javascript:;';
    set_parent_bt.className = 'sap inline-block';
    set_parent_bt.innerHTML = 'set as parent';
    set_parent_bt.title = 'set as parent';
    set_parent_bt.onclick = function () {
        z.s('parent_node_container').innerHTML = node_html;
        form_add('parent_id', node_id);
    };
    div.appendChild(set_parent_bt);

    var hidden = document.createElement('input');
    hidden.type = 'hidden';
    hidden.name = 'prev_ids[]';
    if (is_new){
        hidden.changed = true;
    }
    hidden.value = node_id;
    div.appendChild(hidden);

    var body = document.createElement('div');
    body.innerHTML = node_html;
    div.appendChild(body);

    z.s('prev_nodes_container').appendChild(div);
};
function clear_parent_node() {
    z.s('parent_node_container').innerHTML = '';
    form_add('parent_id', 0);
};
function form_add (key, value) {
    if ( ! node_form[key]) {
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.changed = false;
        node_form.appendChild(input);
    }
    var item = node_form[key];
    item.changed = true;
    item.value = value;
};

function init_node_form() {
    var elements = node_form.elements;
    var length = elements.length;
    for (var i = 0; i < length; i++) {
        var element = elements[i];
        element.changed = false;
        element.onchange = function () {
            if ( ! this.changed) {
                this.changed = true;
            }
        };
    }
    /*
    for (var i=0; i < length; i++) {
        var element = elements[i];
        if(z.hasClass(element, 'required')) {
            alert(element.tagName);
        }
    }*/
}

function submit_node_form() {
    var elements = node_form.elements;
    var length = elements.length;
    for (var i=0; i < length; i++) {
        var element = elements[i];
        if(z.hasClass(element, 'required') && z.trim(element.value) == '') {
            if (z.hasClass(element, 'content') && get_iframe_content(element.id + '_ifr') != '') {
                continue;
            } 
            alert(element.name + ' cannot be empty');
            element.focus();
            return false;
        }
    }
    var arr = [];
    for (var i=0; i < length; i++) {
        arr.push(elements[i]);
        
    }
    for (var j=0; j < length; j++) {
        var element = arr[0];
        if (element.changed) {
            node_form_submit.appendChild(element);
        } 
        if (z.hasClass(element, 'content')) {
            var iframe_id = element.id + '_ifr';
            var iframe_content = get_iframe_content(iframe_id);
            //if (iframe_content != element.value) {
                element.value = iframe_content;
            //}
            node_form_submit.appendChild(element);
        }
        arr.shift();
    }
}
function get_iframe_content (iframe_id) {
    var iframe = z.s(iframe_id);
    var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document;
    return doc.body.innerHTML;
}
</script>